<template>
  <div class="module-header">
    {{ `客户列表` }}
    <div class="module-header-search">
      客户名称：
      <el-input size="default" v-model="customerName" clearable placeholder="输入客户名称，支持模糊搜索"/>
      <el-button size="default" type="primary" @click="currentPage=1;getData()">搜索</el-button>
      <el-button size="default" type="primary" @click="createCustomer">新增客户</el-button>
    </div>
  </div>
  <div class="table-content">
    <el-table :data="customerList" style="width: 100%" stripe empty-text="没有数据">
      <el-table-column prop="name" label="客户名称" width="320" fixed="left"></el-table-column>
      <el-table-column prop="category" label="客户类别" width="150">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            {{ getDictEntity('CUSTOMER_TYPE', scope.row.category + '') }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="客户状态" width="100">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            {{ getDictEntity('IS_ENABLED', scope.row.status + '') }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="contact" label="联系人" width="100"></el-table-column>
      <el-table-column prop="mobile" label="联系电话" width="140"></el-table-column>
      <el-table-column prop="address" label="客户地址" width="340"></el-table-column>
      <el-table-column prop="description" label="客户备注" min-width="300"></el-table-column>
      <el-table-column label="管理" fixed="right" width="140">
        <template #default="scope">
          <el-button size="small" @click="handleEdit( scope.row.id)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 15, 20]"
                   background layout="prev, pager, next, sizes" small :total="recordCount" current-page="1"
                   :default-page-size="10"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </div>
</template>

<script lang="ts">
import {Search} from "@element-plus/icons-vue";
import {mixins, Options} from 'vue-class-component';
import {getCustomer} from "@/apis/customer.api";
import CustomerModel from "@/models/CustomerModel";
import {markRaw} from "vue";
import PageMixin from "@/mixins/page.mixin";
import DictMixin from "@/mixins/dict.mixin";

@Options({})
export default class CustomerListView extends mixins(PageMixin, DictMixin) {
  customerName = '';
  search = markRaw(Search);
  customerList: CustomerModel[] | null = null;

  created() {
    this.getData();
  }

  createCustomer() {
    this.$router.push('/customer/create')
  }

  getData() {
    getCustomer(this.customerName, this.currentPage, this.pageSize).then(value => {
      this.customerList = value.content
      this.recordCount = value.totalElements;
    })
  }

  handleEdit(rowId: number): void {
    this.$router.push('/customer/create/' + rowId)
  }

  handleDelete(rowIndex: number, row: CustomerModel): void {
    console.log(rowIndex, row)
  }
}
</script>

<style scoped>

</style>